'use strict';

// 用户每创建一次todo，就存进数组
// 循环数组，生成数组长度相同的li结构

let todoData = [];
const addTodoEl = document.querySelector('.btn');
const inputEl = document.getElementById('newTodo');
const todoListEl = document.querySelector('.list');

// 新增按钮的点击
function addNewTodo() {
  // input框是否有值
  if (inputEl.value) {
    todoData.push({
      id: Date.now(),
      content: inputEl.value,
      completed: false,
    });

    // 渲染列表
    render();
    inputEl.value = '';
  }
}

function render() {
  let str = '';

  for (let i = 0; i < todoData.length; i++) {
    str += `
    <list class="list-item">
      <input type="checkbox" class="item-check" id="" />
      <p class="item-content">${todoData[i].content}</p>
      <span class="close" data-id="${todoData[i].id}" data-action="remove">✖️</span>
    </list>
    `;
  }

  // 往ul中植入li
  todoListEl.innerHTML = str;
}

function removeTodo(e) {
  if (e.target.dataset.action == 'remove') {
    // 拿到当前这个span上的id值，从数组中检索匹配的id值的元素下表
    // 按照下标移除数组中对应的元素
    const id = e.target.dataset.id;
    for (let index = 0; index < todoData.length; index++) {
      const element = todoData[index];
      if (id == element.id) {
        todoData.splice(index, 1);
        break;
      }
    }
    render();
  }
}

addTodoEl.addEventListener('click', addNewTodo);
todoListEl.addEventListener('click', removeTodo);
